<template>
	<el-container>
		<el-header>
			<div>
				<el-form :model="search" ref="queryForm" :inline="true">
					<el-form-item label="关键字" prop="keywoard">
						<el-input
							v-model="search.keywoard"
							placeholder="登录账号 / 姓名"
							clearable
						></el-input>
					</el-form-item>

					<el-form-item>
						<el-button-group>
							<el-button
								type="primary"
								icon="el-icon-search"
								@click="upsearch"
							>
								查询
							</el-button>
						</el-button-group>
					</el-form-item>
				</el-form>
			</div>
		</el-header>

		<el-main class="nopadding">
			<scTable
				ref="table"
				tableName="listCustomColumn"
				:apiObj="apiObj"
				:params="search"
				:column="column"
				row-key="id"
				@selection-change="selectionChange"
				stripe
			>
				<el-table-column type="selection" width="50"></el-table-column>

				<!-- 消耗token -->
				<template #ConsumeTokenoperator="scope">
					<el-tag
						:key="scope.row.id"
						type="success"
						size="large"
						effect="dark"
					>
						{{ scope.row.consumeToken }}
					</el-tag>
				</template>

				<!-- 请求总数 -->
				<template #RequestCountoperator="scope">
					<el-tag
						:key="scope.row.id"
						type="success"
						size="large"
						effect="dark"
					>
						{{ scope.row.requestCount }}
					</el-tag>
				</template>

				<!-- 剩余额度 -->
				<template #ResidualCreditoperator="scope">
					<el-tag
						:key="scope.row.id"
						size="large"
						:type="
							scope.row.residualCredit > 0.001
								? 'success'
								: 'danger'
						"
						effect="dark"
					>
						{{ moneyFormat(scope.row.residualCredit) }}
					</el-tag>
				</template>

				<template #operator="scope">
					<el-dropdown>
						<span class="el-dropdown-link">
							操作
							<el-icon class="el-icon-right"
								><ArrowDown
							/></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item
									@click="table_credit(scope.row)"
									>调整额度</el-dropdown-item
								>

								<el-dropdown-item @click="table_del(scope.row)"
									>删除</el-dropdown-item
								>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</scTable>
		</el-main>
	</el-container>

	<save-dialog
		v-if="dialog.save"
		ref="saveDialog"
		@success="handleSaveSuccess"
		@closed="dialog.save = false"
	></save-dialog>
</template>

<script>
import { ArrowDown } from "@element-plus/icons-vue";
import saveDialog from "./save";

export default {
	name: "AIUserLimitManage",
	components: {
		saveDialog,
		ArrowDown,
	},
	data() {
		return {
			dialog: {
				save: false,
			},
			apiObj: this.$API.aiUserLimit.page,
			selection: [],
			search: {
				keywoard: "",
			},
			column: [
				{
					label: "名称",
					prop: "name",
					width: "250",
				},

				{
					label: "消耗Token",
					prop: "ConsumeTokenoperator",
					width: "200",
				},
				{
					label: "请求总数",
					prop: "RequestCountoperator",
					width: "200",
				},
				{
					label: "剩余额度",
					prop: "ResidualCreditoperator",
					width: "250",
				},
				{
					label: "创建时间",
					prop: "createdTime",
					width: "150",
				},
				{
					label: "操作",
					prop: "operator",
					width: "170",
					fixed: "right",
					align: "right",
				},
			],
		};
	},
	computed: {
		moneyFormat() {
			return function (row) {
				if (row == undefined) return "";
				// 计算金额
				return "$" + row.toFixed(6);
			};
		},
	},
	methods: {
		dateIfAddZero(time) {
			return time < 10 ? "0" + time : time;
		},
		//添加
		add() {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open();
			});
		},

		tableHandleCommand(row, action) {
			console.log(row, action);
		},
		/**
		 * 调整额度
		 * @param row 数据
		 */
		table_credit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit").setData(row);
			});
		},

		//删除
		async table_del(row) {
			var res = await this.$API.aiToken.remove.post(row.id);
			if (res.code == 200) {
				this.$refs.table.refresh();
				this.$message.success("删除成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},

		/**
		 * 表格选择后回调事件
		 * @param selection
		 */
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search);
		},
		/**
		 * 本地更新数据
		 * @param data
		 * @param mode
		 */
		handleSaveSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh();
			} else if (mode == "edit") {
				this.$refs.table.refresh();
			}
		},
	},
};
</script>

<style>
.query-select {
	max-width: 100px;
}

.el-dropdown-link {
	cursor: pointer;
	color: var(--el-color-primary);
	display: flex;
	align-items: center;
}
</style>
